<template>
	<gui-page :customHeader="true">

		<template slot="gHeader">

			<view class="gui-color-white" style="display: flex; align-items: center; font-size: 38rpx; width: 100%; background-color: #3DC19C; 
				justify-content: space-between; height: 80rpx;">
				<view @tap="back" class="gui-icons" style="font-size: 50rpx;">&#xe600;</view>
				<view style="margin-left: 55rpx;">考试记录</view>
				<view style="margin-right: 20rpx;" @click="shaixuan">筛选</view>
			</view>
			<view style="margin-top: 20rpx;">
				<view class="tab">
					<view v-for="(t,i) in tabs" class="tab_item" @tap="tab_change(i)"
						:class="i==tab_index?'tab_item_action':'no'">
						{{t.name}}
					</view>
				</view>
				<text style="width: 100rpx;"></text>
			</view>
		</template>

		<!-- 页面主体 -->
		<template v-slot:gBody>
			<view class="rush-record">
				<view class="record-list">
					<!-- v-if="recordList.length>0" -->

					<view v-if="Object.keys(recordList).length === 0"
						class="gui-margin-top gui-padding gui-text-center gui-color-gray">
						暂无数据
					</view>

					<view v-else class="record-list-content">
						<view v-for="(item, idx) in recordList" :key="idx">
							<view style="margin-left: 25rpx; color: #999999; padding: 25rpx 0; font-size: 35rpx;">
								{{ item.month }}
							</view>
							<view v-for="(exam,  idx) in item.list" class="shuju"
								style="background-color: white; padding: 25rpx 30rpx;">
								<view>{{ exam.examTime }}</view>
								<view style="width: 450rpx; text-align: center;">{{ exam.examName }}</view>
								<view style="color: #3DC19C; border-bottom: 1px solid #3DC19C;"
									@click="chakan(exam.examScore)">查看</view>
							</view>
						</view>
						<!-- <view style="background-color: white; margin-top: 20rpx;" v-for="(item, idx) in recordList">
							<view style="color: #666666;">{{ item.examTime }}</view>
							<view class="shuju">
								<view style="margin-bottom: 10rpx; font-size: 35rpx;">{{ item.examName }}</view>
								<view style="color: #3DC19C; border-bottom: 1px solid #3DC19C;"
									@click="chakan(item.examScore)">查看</view>
							</view>
						</view> -->
						<!-- <view class="record-list-item" v-for="(item,index) in recordList" :key="index">
							<view class="list-item-top">
								<view class="title etc" :class="{'mark':(index == 0)}">
									{{item.examName ||''}}
												<view class="type">{{item.isCom == 2 ? '企业' : '平台'}}</view>
								</view>
								<view>{{item.examScore?item.examScore:''}}</view>
							</view>
							<view class="rush-info">
								<view class="gate-num">交卷时间：</view>
								<view class="time">{{replaceTime(item.examTime)}}</view>

								<view class="rushStatus" :class="{'fail':(item.state != 1)}">
									{{item.state == 0 ? '未完成':'完成' }}
								</view>
							</view>
						</view> -->

					</view>
				</view>

			</view>


		</template>
	</gui-page>
</template>

<script>
	export default {
		data() {
			return {
				this_index: 1,
				scrollLeft2: null,
				title: '',

				main_hight: 800,
				recordList: {},
				tab_index: 0,

				tabs: [{
					id: 1,
					name: '正式考试',
					index: 0,
					url: '/API-EXAM/frontExam/mngFileExam/queryPage'
				}, {
					id: 2,
					name: '课程考试',
					index: 0,
					url: 'API-EXAM/frontExam/mngFileExam/queryPage'
				}],

			}
		},
		onLoad(opt) {


			this.get_data();

		},
		methods: {
			back() {
				uni.navigateBack();
			},
			replaceTime(time) {
				if (time) {
					return time.substring(0, 16);
				} else {
					return '';
				}
			},

			tab_change(i) {
				this.tab_index = i
				this.recordList = {};
				this.get_data();

			},

			get_data() {
				let self = this;
				console.log('jiekou1: ', this.tabs[this.tab_index].url);
				console.log('jiekou2: ', this.tabs[this.tab_index].index);

				this.$lg.Get(this.tabs[this.tab_index].url, {
					page: this.tabs[this.tab_index].index,
					pageSize: 20,
					isCom: 1,
					examType: this.tabs[this.tab_index].id
				}, function(res) {
					let dataArray = res.data.rows

					// 创建一个对象来存储按月分类的数据
					var groupedData = {};

					// 遍历数据数组
					dataArray.forEach(function(item) {

						// 解析examTime字段的年份部分
						var year = new Date(item.examTime).getFullYear();

						// 解析examTime字段的月份部分
						var month = new Date(item.examTime).getMonth() + 1; // 月份从0开始，所以要加1

						// 转换年月为字符串形式，比如"2024年1月"
						var monthString = year + "年" + month + "月";

						// 如果该月份在对象中不存在，则创建一个新的月份项
						if (!groupedData[monthString]) {
							groupedData[monthString] = {
								month: monthString,
								list: []
							};
						}

						// 将数据添加到该月份的列表中
						groupedData[monthString].list.push(item);
					});

					// 将结果转换为数组形式
					var resultArray = Object.values(groupedData);

					// 打印结果
					// console.log('数据：', resultArray);

					// 根据examTime字段排序
					for (var i = 0; i < resultArray.length; i++) {
						let list = resultArray[i].list
						list.sort((a, b) => {
							let dateA = new Date(a.examTime);
							let dateB = new Date(b.examTime);
							return dateB - dateA;
						})
						for (var j = 0; j < list.length; j++) {
							list[j].examTime = list[j].examTime.slice(5, 10)
						}
					}

					self.recordList = resultArray;

					console.log('考试记录res: ', self.recordList);
				}, err => {
					console.log('考试记录err: ', err);
				}, false, false)
			},

			examGroups() {
				console.log('groups: ', groups);
				return groups
			},

			scroll(e) {
				console.log('shuju: ', e)
				this.scrollLeft = e.detail.scrollLeft
			},
			chakan(examScore) {
				// console.log('chengji: ', examScore);
				uni.navigateTo({
					url: '/pages/MY/viewRecord?examScore=' + examScore
				})
			},
			shaixuan() {
				this.$boya.msg('暂未开放')
			},
		}
	}
</script>

<style>
	page {
		/* width: 100vw; */
		/* height: 100vh; */
		/* background: url("https://app.lgwisdomunion/static/img/bj_liand.469cefe0.png") 100% 100% / 100% 100%; */
		/* background-repeat:no-repeat; */
		background-color: #EEEEEE;
	}

	.tab {
		/* position: fixed; */
		top: 100rpx;
		width: 100%;
		padding: 10rpx;
		display: flex;
		align-content: center;
		justify-content: center;

	}

	.tab_item {
		padding: 18rpx 35rpx;
		border-bottom: solid 1px #999999;
		background-color: white;
		color: #666666;
	}

	.tab_item_action {
		background-color: #F27A43;
		color: white;
		font-weight: bold;
		border-radius: 0 20rpx 0 20rpx;
	}

	.no {
		border-radius: 20rpx 0 20rpx 0;
	}

	.back_icon {
		color: #333333;
		width: 100rpx;
		font-size: 50rpx;
		text-align: center;
		font-weight: bold;
		display: flex;
		justify-items: center;
		align-items: center;
		justify-content: center;
	}

	.content {}

	.record-list {
		width: 100%;

	}

	.record-list-item {
		line-height: 50rpx;
		font-size: 34rpx;
		padding: 10rpx 0rpx;
	}

	.shuju {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		padding: 18rpx 20rpx 15rpx 20rpx;
		font-size: 32rpx;
	}

	.rush-info {
		font-size: 26rpx;
		color: #666666;
		display: flex;
		justify-content: space-between;
	}

	.rushStatus {
		border: 1px solid #0e3494;
		color: #0e3494;
		border-radius: 20rpx;
		padding: 0rpx 10rpx;
	}

	.list-item-top {
		display: flex;
		justify-content: space-between;
	}
</style>